<template>
  <div id="login">
    <div class="top">
      <!-- 顶部背景图片 -->
      <div class="bgImg">
        <!--返回-->
        <div class="reback"
             style="
             padding-top: 15px;
             padding-left: 20px;
             font-size: 30px;
             "
        >
          <a style="color: #e0effb" href="/"><</a>
        </div>
      </div>
      <!-- logo图片 -->
      <div class="logo">
        <img class="logo_img" src="../../../assets/logo.png" />
      </div>
    </div>

    <!-- 主体登录表单 -->
    <div class="main">
      <!-- 账号密码登录 -->
      <div v-if="state" class="input">
        <van-form>
          <van-field
              class="uname"
              v-model="uname"
              left-icon="phone"
              placeholder="请输入手机号或邮箱号"
              :rules="[{ required: true, message: '请填写手机号或邮箱号' }]"

          />
          <van-field
              type="password"
              class="upwd"
              v-model="ver"
              left-icon="lock"
              placeholder="请输入登录验证码"
              :rules="[{ required: true, message: '请填写验证码' }]"
          />
          <button
              @click="getCode"
              style="
              color: #1B1E27;
              position: absolute;
              margin-top: -7vh;
              right: 25px;
              font-size: 10px;
              color: cornflowerblue;
              "
              v-bind:disabled="disable"
          >获取验证码</button>
        </van-form>
      </div>

      <!-- 邮箱密码登录 -->
      <div v-else class="input">
        <van-cell-group>
          <van-field
              class="mail"
              v-model="uname"
              left-icon="envelop-o"
              right-icon="close"
              placeholder="请输入登录账号"
          />
          <van-field
              type="password"
              class="upwd"
              v-model="upwd"
              left-icon="lock"
              right-icon="eye-o"
              placeholder="请输入登录密码"
          />
          <span
              @click="forgetPwd"
              style="
              position: absolute;
              margin-top: -4vh;
              right: 15px;
              font-size: 10px;
              color: cornflowerblue;
            "
          >忘记密码</span
          >
        </van-cell-group>
      </div>

      <!-- 阅读协议 -->
      <div style="font-size: 10px; margin: 10px 40px">
        <van-radio-group v-model="radio" class="vrg">
<!--          <van-radio name="check">

          </van-radio>-->
          <van-checkbox @click="check" v-model="checkbox" shape="round" style="display: inline-block"/>
          <span
          >我已阅读并同意时光源<span style="color: blue">用户协议</span
          >，<span style="color: blue">隐私协议</span></span
          >
        </van-radio-group>
      </div>

      <!-- 登录注册按钮 -->
      <div class="btn">
          <van-button
              :disabled="agreement"
              round
              color="#020202"
              @click="login"
              style="width: 80%; margin-left: 10%; margin-bottom: 1vh">登录
          </van-button>
        <router-link :to="{path: '/registry'}">
          <van-button round color="#bbbbbb" style="width: 80%; margin-left: 10%"
          >注册</van-button
          >
        </router-link>
      </div>

      <!-- 占位 -->
      <div style="height: 10px"></div>

      <!-- 选择登录方式 -->
      <div class="login_mode" style="font-size: 12px">
        <span @click="phone" style="margin-left: -10vw; margin-right: 17vw">
          <van-icon name="phone" />手机/邮箱登录
        </span>
        <span>|</span>
        <span @click="email" style="margin-left: 17vw">
          <van-icon name="lock" />密码登录
        </span>
      </div>
      <hr />
      <div class="footer"></div>
      <p>SHI&nbsp;&nbsp;GUANG&nbsp;&nbsp;YUAN</p>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import {Toast} from "vant";

export default {
  data() {
    return {
      uname: "",
      mail: "",
      upwd: "",
      ver: "",
      radio: "1",
      state: true,
      agreement: true,
      checkbox: false,
    };
  },
  methods: {
    check() {
      this.agreement = !this.agreement;
    },
    phone() {
      this.state = true;
    },
    email() {
      this.state = false;
    },
    //获取验证码
    getCode(){
      console.log(
          "username"+this.uname
      )
      if(this.uname=='') {
        Toast("登录凭证（手机或邮箱）不能为空")
        return
      }
      let url;
      let flag;
      //判断是手机号还是邮箱号
      if (/^((13[0-9])|(14[579])|(15([0-3]|[5-9]))|(16[56])|(17[0-8])|(18[0-9])|(19[1589]))\d{8}$/.test(this.uname)){
        //是手机
        flag="phone";
        url='http://localhost:10008/userValidation/sendCodeByPhone';
      }else if (/^[a-zA-Z0-9]+([-_.][A-Za-zd]+)*@([a-zA-Z0-9]+[-.])+[A-Za-zd]{2,5}$/.test(this.uname)){
        flag="email";
        url='http://localhost:10008/userValidation/sendCodeByEmail';
      }else{
        Toast("登录凭证（手机或邮箱）格式不合法")
        return
      }
      let username=this.uname;
      this.disable=true;
      //发送请求
      this.axios.get(url+"?"+flag+"="+this.uname).then(response => {
        console.log(response.data)
        if(response.data.state == 200){
          Toast('发送成功')
        }
        else{
          Toast('发送失败')
          this.disable=false;
          console.log(response.data)
        }
      }).catch((err)=>{
        this.disable=false;
        console.log(err)
      })
    },
    login() {
      console.log('password'+this.upwd)
      console.log('uname'+this.uname)
      console.log("code"+this.ver)
      if (this.state){
        //验证登录
        if (this.uname== ''||this.ver==''){
          Toast("登录凭证（手机或邮箱）不能为空")
          return
        }
      }else{
        //密码登录
        if (this.uname==''||this.upwd==''){
          Toast("用户名密码不能为空")
          return
        }
      }
      //const url = 'http://localhost/:10008/user/sso/login'
      let url='';
      let dat = {}
      if (this.state){
        url = 'http://localhost:10008/user/info/sso/login/verification'
        dat = {
          username: this.uname,
          code: this.ver
        }
      }else{
        url = 'http://localhost:10008/user/info/sso/login/uname'
        dat = {
          username: this.uname,
          password: this.upwd,
        }
      }
      console.log(dat)
      this.axios.post(url,dat).then(response => {
        console.log("data:"+response.data)
        if(response.data.state == 200){
          if (!response.data.data.tokenValue.isEmpty) {
            Toast('登录成功')
            window.localStorage.setItem("token",response.data.data.tokenValue);
            console.log("token:" + localStorage.getItem("token"))
            this.$router.push('/')
          }else{
            Toast('登录失败')
            console.log(response.data)
          }
        }
        else{
          Toast('登录失败')
          console.log(response.data)
        }
      }).catch((err)=>{
        console.log(err)
      })
    },
    forgetPwd(){
      if (this.uname==''){
        Toast("请输入用户名")
      }else{
      this.$router.push({
        path: '/forgetpwd',
        query: {
          username: this.uname
        }
      })
      }
    },
  },
};
</script>

<style scoped>
.vrg{
  display: flex;
  justify-content: center;
  align-items: center;
}
#login {
  margin: 0;
  padding: 0;
  position: relative;
}

.bgImg {
  width: 100vw;
  height: 30vh;
  z-index: 1;
  background-image: url("https://img01.yzcdn.cn/vant/cat.jpeg");
  background-size: 100%;
}

.logo {
  position: absolute;
  width: 40vw;
  height: 15vh;
  top: 20vh;
  left: 30vw;
  background-color: #ffffff;
  border-radius: 60%;
  z-index: 2;
}

.main {
  margin-top: -20px;
  margin-left: 3vw;
  width: 90vw;
  border: 2px solid #888888;
  border-radius: 20px;
  z-index: 999;
  padding: 5px;
  background-color: #ffffff;
}

.logo_img {
  width: 150%;
  height: 150%;
  margin-left: -10vw;
  margin-top: -5vh;
}

.van-cell {
  margin-inline-start: 17.5%;
  width: 65%;
}

.input {
  margin-top: 10vh;
}

.btn {
  margin-top: 5vh;
}

.login_mode {
  margin-left: 22vw;
  margin-top: 3vh;
  margin-bottom: 1vh;
  font-size: 16px;
  color: #888888;
}

hr {
  margin: 10px 0;
  border-color: skyblue;
}

p {
  font-size: 16px;
  margin-left: 25vw;
  color: #888888;
}
body{
  margin: 0;
}
</style>